import React, {
  FC,
  useState
} from 'react'
import './Home2.scss'
import {TransitionGroup, CSSTransition} from 'react-transition-group'

const Home2: FC = props => {
  const [num, setNum] = useState(0);
  return (
    <div className={'container'} style={{height: 2000}}>
      <TransitionGroup className={'square-wrapper'} >
        <CSSTransition
          key={num}
          timeout={500}
          classNames={'fade'}
        >
          <div className={'square'}>{num}</div>
        </CSSTransition>
      </TransitionGroup>
      <button onClick={() => {
        setNum((num + 1) % 2)
      }}>
        toggle
      </button>
    </div>
  );
  
}

export default Home2
